<template>
  <div>
    <div class="shelf-container">
      <header class="header">
        <div class="name">书架</div>
        <div class="icons">
          <i class="iconfont icon-sousuo" @click="toSearch"></i>
        </div>
      </header>
      <Loading v-show="isLoading" />
      <div class="list" v-show="!isLoading">
        <div>
          <bookSelefList
            ref="booklist"
            :list="list"
            @onlongPress="onlongPress"
          ></bookSelefList>
        </div>
      </div>
      <compTabbar></compTabbar>
    </div>
    <div
      class="bottom-popup"
      v-show="isShowPop"
      @mousewheel="handleMove"
      @touchmove="handleMove"
    >
      <transition
        duration="1000"
        enter-class="animate__animated animate__slideInUp"
        enter-to-class="animate__animated animate__slideInUp"
        leave-class="animate__animated animate__slideOutDown"
        leave-to-class="animate__animated animate__slideOutDown"
      >
        <bottomPop :isShowPop="isShowPop" @hidenMask="hidenMask">
          <ul class="content">
            <li @click="goBookDetail">
              <i class="iconfont icon-shujixiangqing"></i>书籍详情
            </li>
            <li @click="delebook">
              <i class="iconfont icon-shanchu1"></i>删除
            </li>
          </ul>
        </bottomPop>
      </transition>
    </div>
  </div>
</template>

<script>
import { bookDetailInfo, getBookSelfRecomd } from "@/request/api";
import compTabbar from "@/components/compTabbar";
import bookSelefList from "@/components/bookSelefList";
import bottomPop from "@/components/bottomPop";
export default {
  components: {
    compTabbar,
    bookSelefList,
    bottomPop,
  },
  data() {
    return {
      isLoading: true,
      list: [],
      oldData: [],
      isShowPop: false, //false：不展示底部弹出层
      bookid: 0,
    };
  },
  methods: {
    toSearch() {
      this.$router.push("/bookcity/popup");
    },
    getData() {
      getBookSelfRecomd().then((res) => {
        if (res.code == 0) {
          this.oldData = res.data.list.filter(
            (item) => item.title != "大夏王侯"
          );
        }
      });
    },
    //获取加入书架的书本
    async getBook() {
      let bookIDS = JSON.parse(localStorage.getItem("bookIDS")) || [];
      let promiseArr = [];
      let list2 = [];

      for (let i = 0; i < bookIDS.length; i++) {
        if (this.list.indexOf(bookIDS[i]) != -1) {
          break;
        }
        let promise = await bookDetailInfo({ sourceUuid: bookIDS[i] });
        promiseArr.push(promise);
      }
      if (promiseArr.length > 0) {
        this.showMore = false;
        let res = await Promise.all(promiseArr);
        res.map((item) => {
          let {
            data: { book },
          } = item;
          let obj = {
            id: book.bookId,
            cover: book.cover,
            title: book.title,
          };
          list2.push(obj);
        });
        this.isLoading = false;
        this.list = this.oldData.concat(list2);
        // console.log(this.list);
      }
    },
    //删除书架书本
    delebook() {
      this.isShowPop = false;
      this.list = this.list.filter((item) => item.id != this.bookid);
      let arr = JSON.parse(localStorage.getItem("bookIDS")).filter(
        (item) => item != this.bookid
      );
      localStorage.setItem("bookIDS", JSON.stringify(arr));
    },
    //获取书本详情
    goBookDetail() {
      this.$refs["booklist"].goBookDetail();
      this.isShowPop = false;
    },

    //阻止滚动事件
    handleMove(e) {
      e.preventDefault();
    },

    //长按出现遮罩层
    onlongPress(obj) {
      this.isShowPop = obj.isShowPop;
      this.bookid = obj.bookid;
      document.oncontextmenu = (e) => {
        e.preventDefault();
      };
    },
    hidenMask(b) {
      this.isShowPop = b;
    },
  },

  activated() {
    this.getBook();
  },
  created() {
    this.getData();
  },
};
</script>

<style lang="scss" scoped>
.shelf-container {
  padding-top: 60px;
  padding-bottom: 60px;
}
.header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 60px;
  padding: 20px 18px;
  box-sizing: border-box;
  border-bottom: 1px solid #eee;
  background-color: #fff;
  .name {
    font-size: 24px;
    // background-color: red;
  }
  .icons {
    flex: 1;
    text-align: right;
    .iconfont.icon-sousuo {
      font-size: 24px;
      &:first-child {
        margin-right: 20px;
      }
    }
  }
}
.list {
  box-sizing: border-box;
}
.bottom-popup {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  .mask {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
  }
  .content {
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 14px 14px 30px 14px;
    font-size: 16px;
    background-color: #fff;
    li {
      display: flex;
      align-items: center;
      padding: 10px 0;
    }
  }
}
</style>